<!--
*  2021-03-15
*  成品跟踪
-->
<template>
  <div id="app" class="product-view">
    <!-- 头部导航 -->
    <van-nav-bar
      ref="header"
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      left-text="返回"
    >
    </van-nav-bar>

    <!-- 搜索 -->
    <van-search
      v-model="keyLike"
      placeholder="输入搜索关键词"
      @search="searchFn"
    ></van-search>
    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      ref="wrapper"
      :data="tableData"
      :totalPage="totalPage"
      :pulldown="true"
      @pulldown="searchFn"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-cell v-for="(data, index) in tableData" :key="index">
          <template slot="title">
            <span
              @click="onClickColor(data)"
              style="
                line-height: 30px;
                color: #07c160;
                font-size: 16px;
                font-weight: 700;
              "
              >{{ data.designNo }}</span
            >
          </template>
          <template slot="label">
            <div class="product-code__cell">
              <p>
                <span style="color: red" @click="onClickExcept(data)"
                  >预计匹数: {{ data.exceptNum }}</span
                >
                <span style="color: red" @click="onClickArea(data)"
                  >实际匹数: {{ data.totalNum }}</span
                >
              </p>
              <p>
                <span>大仓匹数: {{ data.otherAreaNum }}</span>
                <span>临仓匹数: {{ data.tempAreaNum }}</span>
              </p>
              <p>
                <span>实际米数: {{ data.length }}</span>
              </p>
            </div>
          </template>
          <template>
            <span @click="onClickVat(data)" style="color: blue">查看缸号</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>
  </div>
</template>

<script>
import { openWin, comeBack } from "@/utils/index";
import { getProductViewsList } from "@/api/product";
import {SPLIT_BLANK} from "@/api/enum";

export default {
  name: "productView",
  data() {
    return {
      title: "成品跟踪",
      totalPage: 1,
      tableData: [],
      pageSize: 100,
      pageNum: 1,
      keyLike: "",
      productId: 0,
      productFlag: 0,
      checkId: 0,
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      if (window.api.pageParam.keyLike) {
        that.keyLike = window.api.pageParam.keyLike;
      }
      let scanCode = window.api.pageParam.scanCode;
      if (scanCode) {
        //特殊处理下 加flag=0
        if (scanCode.indexOf("http://") == 0) {
          if(scanCode.indexOf("flag") == -1) {
            scanCode = scanCode + "?flag=0";
          }
          that.productFlag = scanCode.substring(scanCode.lastIndexOf("=")+1, scanCode.length);
          scanCode = scanCode.slice(scanCode.lastIndexOf("/") + 1, scanCode.lastIndexOf("?"));
          that.productId = scanCode;
        } else if(scanCode.startsWith("15,")) {
          that.checkId = scanCode.substring(3, scanCode.checkId);
        }
      }
      that.onGetTableData();
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 返回
    onClickLeft() {
      comeBack();
    },
    searchFn() {
      const that = this;
      that.productId = 0;
      that.checkId = 0;
      that.productFlag = 0;
      that.onGetTableData();
    },
    // 成品跟踪列表
    onGetTableData() {
      this.totalPage = 1;
      this.tableData = [];
      getProductViewsList({
        designNo: this.keyLike,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        productId: this.productId,
        checkId: this.checkId,
        productFlag: this.productFlag,
      }, res => {
        this.tableData = res.list;
        this.$nextTick(() => {
          setTimeout(() => {
            if (window.api.pageParam.scrollY) {
              this.$refs.wrapper.scrollTo(0, window.api.pageParam.scrollY);
            }
          }, 200);
        });
      });
    },
    // 颜色汇总
    onClickColor(data) {
      openWin("view-color", {
        designNo: data.designNo,
        scrollY: this.$scroll.y,
        keyLike: this.keyLike,
      });
    },
    // 预计库存
    onClickExcept(data) {
      openWin("view-except", {
        designNo: data.designNo,
        color: "",
        isColor: false,
        title: data.designNo + "(预计匹数汇总)",
        scrollY: this.$scroll.y,
        keyLike: this.keyLike,
      });
    },
    // 实际汇总
    onClickArea(data) {
      openWin("view-area", {
        designNo: data.designNo,
        color: "",
        vatNo: "",
        isColor: false,
        isVatNo: false,
        title: data.designNo + "(实际匹数汇总)",
        scrollY: this.$scroll.y,
        keyLike: this.keyLike,
      });
    },
    // 缸号汇总
    onClickVat(data) {
      openWin("view-vat", {
        designNo: data.designNo,
        scrollY: this.$scroll.y,
        keyLike: this.keyLike,
      });
    },
  },
};
</script>

<style lang="scss">
.product-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-search {
    width: 100%;
    position: relative;
    z-index: 999;
  }
  .van-cell__title {
    flex: 0 0 70%;
    .product-code__cell {
      width: 100%;
      display: flex;
      flex-direction: column;
      p {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        span {
          flex: 1;
          display: flex;
          align-items: center;
          &:last-child {
            justify-content: flex-end;
          }
        }
        &:last-child {
          span {
            justify-content: flex-start;
          }
        }
      }
    }
  }
  .van-button {
    height: 30px !important;
  }
  .public-scroll {
    flex: 1;
    overflow: hidden;
  }
}
</style>
